<script setup lang="ts">
import { ref } from 'vue'
// v-on:事件。事件绑定，简写是 @事件名

// 调用时不传递参数获取到的是默认的事件对象
const sayHi = (name: string) => {
  // console.log('name:' + name)
  console.log(name)
}

// 既要获取到事件对象，又要传递自定义参数
const getEvent = (e, name) => {
  console.log(e)
  console.log(name)
}

const food = ref('隆江猪脚饭')

// 切换图片 v-bind
const index = ref(0)
const arr = ['https://img2.baidu.com/it/u=60856268,584589370&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800', 'https://img0.baidu.com/it/u=999488746,15854658&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500']
const isBorder = ref(false)

// v-for 遍历数组，对象，基于数字循环若干次

const list = ref(['西瓜', '苹果', '鸭梨', '榴莲'])
const person = ref({
  name: 'ikun',
  cloth: '背带裤',
  skill: '唱,跳,rap',
})
</script>

<template>
  <div class="about">
    <!-- 调用+传递具体的参数 -->
    <h1 @click="sayHi('jack')">This is an about page</h1>
    <!-- 没有主动传递参数可以获取到事件参数
         如果要获取事件默认的对象，并且可以传递自定义参数
         需要通过关键字 $event 
    -->
    <h1 @click="getEvent($event, 'rose')">获取事件对象</h1>

    <!-- 逻辑比较简单可以直接写在行内 -->
    <h1 @click="food += '!'">{{ food }}</h1>

    <!-- 通过 v-bind 实现切换图片 -->
    <img :class="{ border: isBorder }" @click="index = index === 1 ? 0 : 1" :src="arr[index]" alt="" />
    <button @click="isBorder = !isBorder">动态设置样式</button>
  </div>
  <!-- v-for 指令 -->
  <h4 v-for="(item, index) in list" @click="list.splice(index, 1)">{{ item }}</h4>
  <!-- value 属性值，key是属性名 -->
  <h4 v-for="(value, key) in person">
    {{ value + key }}
  </h4>

  <h4 v-for="item in 10">😘 ლ(′◉❥◉｀ლ)ლ(′◉❥◉｀ლ)ლ(′◉❥◉｀ლ)ლ(′◉❥◉｀ლ)</h4>
</template>

<style scoped>
img {
  display: block;
  width: 300px;
}
.border {
  border: 10px solid gray;
}
</style>
